היתרון הברור של אתר שמוריד רק קובץ סקריפט אחד הוא עליה יותר מהירה וחסכון גדול יותר בתעבורה.
החיסרון הלא ברור הוא - איך עושים את זה כשעמוד אחד זה גלריה ועמוד אחר זה בלוג והקוד שלהם בכלל שונה לגמרי
פחות בקשות לשרת - יותר מהר
כל כלי ושירות שמודד ביצועים של אתר (pagespeed, yslow) ממליץ בחום להוריד את כמות הבקשות שהדפדפן עושה אל השרת. אחד הגורמים לבקשות רבות אל השרת הוא מכלול הסקריפטים שהעמוד צריך.
רק בעמוד הזה נמצאים לפחות חמישה סקריפטים וספריות כמו jquery, כמה פלאגינים, סקריפטים של כפתורי לייק וגוגל ועוד כמה דברים שמגיבים ללחיצות על כפתורים למיניהם. כל סקריפט כזה דורש זמן להיטען במשך זמן לא נורמלי, בממוצע כחצי שניה. זה מטורף.
למזלנו דפדפנים הם תוכנות חכמות מספיק ששומרות את הסקריפטים ב-cache. במקום לקחת את הסקריפט מהשרת בכל פעם מחדש, הם לוקחים את הגרסה השמורה אצלכם במחשב ורק מאמתים עם השרת ששום דבר בה לא השתנה. התהליך הזה יותר מהיר וכאן לוקח כ-0.2 שניות שנובעים מהעבודה שהדפדפן בכל זאת צריך להגיע לשרת, לבקש ממנו את הסקריפט ולוודא שהוא לא השתנה מאז הפעם הקודמת.
וככה בשביל כל סקריפט בכל עמוד.
להכניס את כל הסקריפטים לקובץ אחד
נוכל לנצל את יתרונות ה-cache עד הסוף ולהסוף את כל הסקריפטים של כל העמודים לתוך קובץ JS אחד.
הבעיה היחידה שתישאר לנו היא איך להפעיל קוד מתאים לכל עמוד, הרי בעמוד אחד צריך להפעיל סקריפט של גלריה ובעמוד אחר סקריפט שבודק נתונים בטופס צור קשר. קצת מאתגר, אבל בכלל לא קשה.
אטריביות (מאפיין) מיוחד בתגית ה-body יגיד איזה קוד להפעיל
<body data-scriptOnPage="blog" >
כדי שכל המערכת שלנו תפעל נעשה שני שינויים קטנים:
1. נשנה את מבנה הקוד שלנו למודולים שלא קשורים או תלויים אחד בשני
2. נוסיף קצת קוד שמתייחס לאטריביות הזה ומפעיל את המודול המתאים שלנו
מודולים
מודולים נראים בצורת משתנה פשוט שמכיל בתוכו פונקציות של עמוד שבתוכן נמצא כל הקוד שלך.
var SiteModules =
{
blog :
{
alert('this will alert on blog page');
}
gallery :
{
var div = $('div').html("This will appear on gallery page");
$(document).append(div);
}
ANOTHER_PAGE_NAME :
{
// YOUR CODE GOES HERE
}
}
{
blog :
{
alert('this will alert on blog page');
}
gallery :
{
var div = $('div').html("This will appear on gallery page");
$(document).append(div);
}
ANOTHER_PAGE_NAME :
{
// YOUR CODE GOES HERE
}
}
תוכל לעצור לרגע ולקפוץ למדריך של iiddaannyy על אובייקטים ב javascript עם json
אם כל מה שהולך פה נראה לך יותר מדי מוזר.
מה שקורה כאן בפועל הוא שיצרנו
משתנה בשם SiteModules שמכיל אוסף של פונקציות, שכל אחת תתאים לעמוד אחר באתר.
הפעלת מודול לפי האטריביות
חתיכת קוד נוספת שנצטרך להוסיף לקוד שלנו, זה את הקוד שקורא את האטריביות מהתג body
ומפעיל את הפונקציה המתאימה לאותו עמוד.
var Loader = function ()
{
var ns = "SiteModules"; // <-- The name of the variable above
var attr = "data-scriptOnPage"; // <-- the name of the attribute in the body tag
var pagename = document.body.getAttribute(attr);
if
(
pagename !== "" &&
window[ns] &&
window[ns][pagename] &&
typeof window[ns][pagename] === "function"
)
{
return window[ns][pagename]();
}
};
jQuery(document).ready(Loader);
{
var ns = "SiteModules"; // <-- The name of the variable above
var attr = "data-scriptOnPage"; // <-- the name of the attribute in the body tag
var pagename = document.body.getAttribute(attr);
if
(
pagename !== "" &&
window[ns] &&
window[ns][pagename] &&
typeof window[ns][pagename] === "function"
)
{
return window[ns][pagename]();
}
};
jQuery(document).ready(Loader);
הקוד הזה מוסיף עוד פונקציה אחת לקובץ שלנו.
ברגע שהעמוד נטען, jQuery מפעילה את הפונקציה Loader.
הפונקציה בתורה קוראת את האטריביות מהתג body ובודקת האם מוגדר משתנה בשם SiteModules
והאם יש בתוכו פונקציה שמתאימה לשם העמוד הנוכחי לפי האטריביות. אם כן, היא מפעילה את הפונקציה הזו.
ככה שלא משנה באיזה עמוד אתה נמצא, כל הקוד javascript שלך נמצא באותו קובץ JS
אבל רק החלק שמתאים לאטריביות scriptOnPage יופעל.
תגובות לכתבה:
נראה טוב.
מה שכן, יש מקרים של קבצי סקריפט ענקיים. בגירסה הקודמת של האתר שלי, קוד הסקריפט של הצ'אט הכיל בערך 500 שורות.
הבעיה היא שלהכניס קודים ענקיים לאיזו פונקציה ולבסוף ליצור קובץ עצום שתמיד ייטען זה בעייתי.
אני חושב שיהיה יותר חכם לבצע את כל הפעולה הזו בשרת, לייצר בשרת קובץ סקריפט שיכיל רק את הקוד שרלוונטי לאותו עמוד (ועל הדרך אפשר לבצע כיווץ בקובץ ומחיקת תווים מיותרים) ולבסוף לשלוח ללקוח.
ככה הקובץ שהלקוח מוריד קטן יותר כי הוא מכיל רק את מה שקלוונטי לאותו עמוד ואנחנו נהנים מהפרדה של הקוד לקבצים (מאחורי הקלעים).
דרך אגב, המדריך שלי זקוק לעריכה. אעשה את זה בקרוב. :)
אתה צודק
ויש כלים לזה. בתור התחלה coffeescript
שמעבר לקימפול של קופי עצמו יודע גם לאחד כמה קבצים לקובץ אחד.
בהקשר לזה,
אני בונה אתר שכולו אבל כולו בAJAX
מה עדיף ליצור פונקצייה שטוענת "במעבר דף" את הסקריפט הרצוי לאותו דף או קובץ אחד עם כל הסקריפטים?
זה לא מפריע אחד לשני.
את הפונקציה שבמדריך מופעל בעליה של העמוד תחליף בפונקציה שמופעלת בעת חילוף דף
ועדיין תשאיר את כל הסקריפטים של האתר באותו קובץ JS
ואם מדובר בסקריפטים לא בעייתים?
לדוגמא הצמדת אירועים.
הצמדת אירועים זה הדוגמה הקלאסית למטרה של הקוד במדריך.
בכל עמוד יש לך אלמנטים שונים שדורשים הצמדת אירועים שונה.